import { useState, useLayoutEffect, useEffect } from 'react'

export default function LayerOutEffect() {
  const [color, setColor] = useState('red');
  useLayoutEffect(() => {
      console.log('useLayoutEffect:', color);
  });
  useEffect(() => {
      console.log('useEffect:', color);
  });
  return (
    <div>
      <div id="myDiv" style={{ background: color }}>颜色</div>
      <button onClick={() => setColor('red')}>红</button>
      <button onClick={() => setColor('yellow')}>黄</button>
      <button onClick={() => setColor('blue')}>蓝</button>
    </div>
  )
}